Let’s dive into how we can use images in HTML. And specifically, we are gonna take a logo and we’re gonna place it here at the top of this nav bar. We’re gonna see how we can import the image and how we can select it using CSS and then also how we can style it and customize its size. If you want to, you can use your own logo or you can use one of the demo ones that I have here, and I’ll include a link to the show notes for you.

The very first thing you can do is open this up and you can see we have a dark version and then a white version. And for this specific background, we really need to use the white version. So right-click on this and then click Save Image As and you can keep the name exactly the same and then place it inside of your project. Now, you can just hit Save right now, but then we’ll also customize exactly where it’s at so that we can see the path and so we can organize it properly.

So if we switch back here and then go to the code, I’m gonna place this above all the other nav links here and let’s just call it Banner Image. So this is going to be a wrapper div. And then I want to use an image tag. So if you’re using Visual Studio Code, you can type, “IMG,” hit tab, and this is gonna give you the values that you want. Now because we place this at the root of our project, you can see that we have this Dev Camp Fantastic Fries logo dash white right here. And so we could just grab this value. And so let me actually copy that name so that I’m not typing it out verbatim.

And then you can place that inside of this SRC tag. Now this SRC tag, it stands for Source, which means that we’re telling the image tag that the source of this image is this path. And then we’ll play around with how we can place this image inside a different part of the project. Now we also have this ALT tag. So here I’m going to say the logo. Now technically you could say anything that you wanted right here. The rational for the ALT tag is there’s a couple reasons. One is if someone has disabled images in their browser, then the ALT tag will show up instead of the image, but the most common reason for using the ALT tag is for accessibility reasons.

So if someone, say someone whose blind is going through your site and the way it works is there’s systems out there that will read things like the ALT tags in your content. If you leave the ALT tag blank, then they’re not gonna know that a logo was there. So that’s part of the reason. Google also reads through this for search engine optimization reasons. So it’s always good to put some kind of value here that describes what the logo is or that a logo is there. So that is gonna give us our basic import so let’s go back and hit refresh. And wow, you can see, that is imported, but that’s definitely not what we’re looking for. And that’s fine, that’s what were expected.

This is gonna take a. by default, the way that HTML works is it brings in the image and it does not do anything to it. It doesn’t try to make it fit or anything like that. That is our job. So now let’s see how we can select this image. So we know that we have a class here called “Banner Image.” And there are a couple different ways that we could customize it. So I could come here and … let me give us a little bit more room. So I could come in the tag itself and just say that I want to provide a hard coded with in line.

So here I could say “With” and for this kind of size, the value that I saw looked the best was something like 216 pixels. And then let’s give it a hight and the height here, you can combine pixels and percentages. So for the height here I could say just 100%. What this means is that we are controlling the width, we’re saying how wide it should be, and then we’re telling the height to just be automatic. So I’ll hit save and now if I hit refresh, you can see that works and that looks really good. And that’s perfectly fine. I usually don’t do it this exact way.

The approach I usually take is to apply a actual CSS class to it. So if I have my banner image here, what I can do is come down to the bottom of the CSS file and say “Banner dash image” and then I want to select the image tag inside of that. And now I can apply the exact same rules. So here I can say with and we wanna go with that 216 pixels and then for the height 100%, hit save, go back and hit refresh, and you can see that is working properly. So that’s just my own personal preference. Part of the reason is because I don’t really like my images to get really messy and the more code that you put inside of this tag, the longer it’s gonna be for you to find it when you need to fix it and also just starts to look a little bit cluttered.

So I’d much rather put it inside of a style tag. But that is how you can import and then customize an image using HTML. And there’s only one more thing that I wanna do before we end this guide and that is I want to place this inside of a little bit more logical place. Because right now, you can see that I have the image at the root of the project, but this doesn’t make a lot of sense because if I start bringing in dozens or hundreds of images, this is gonna start to get really messy. So instead what I’m gonna do is I’m gonna create a new tag, or a new folder here.

I’m just gonna call it “images” and then inside of images, I want to pass in another folder. So I can right click on it and click new folder. And here I’m gonna say “logos.” And then what I can do is I can just click and then drag this in and it says, “Are you sure you wanna move this?” And so yes, I say I want to move it. Now this will break the site. So if I hit refresh here you can see … oh, one thing that is cool. You see that little ALT tag is showing up. So if the image is not available, it will show the ALT tag, but now we have a broken image and it’s because we need to update the path.

So here I will say that I want it to find it in the images directory in logos and then it will go and it will find the image file. Switching back to the browser, hitting refresh. You can see that image is back and it is working properly.